<template>
	<view class="project-view">
		<image :src="`/static/home-state-icon-${item.status}.png`" class="state-icon"></image>
		<view v-if="item && item.projectId" class="card-item" :class="{'card-active': item.backdropFlag == 20}"
			@click="onNavDetail">
			<image :src="`${IMG_URL}${item.backdropFlag == '20' ? item.backdropDeepUrl : item.backdropShallowUrl }`"
				mode="widthFix" class="card-bg"></image>

			<view class="item-name">{{item.name}}</view>
			<view class="tag-view">
				<view class="tag-item" :style="{background:item.projectTypeVO.backgroundColor }">
					{{item.projectTypeVO.name}}
				</view>
			</view>

			<view class="num-view">
				<view class="num-item">
					<view class="num-text">
						<view>{{item.minEarningsRate}}-{{item.maxEarningsRate}}%</view>
						<view class="symbol-text">{{item.earningsSymbol || ''}}</view>
					</view>
					<view class="num-desc">约定回报(年化){{item.earningsSymbol}}</view>
				</view>
				<view class="division"></view>
				<view class="num-item">
					<view class="num-text">{{item.initialDeliveryAmount}}</view>
					<view class="num-desc">出资金额(万元)</view>
				</view>
				<view class="division"></view>
				<view class="num-item">
					<view class="num-text">{{item.issueScaleAmount}}</view>
					<view class="num-desc">发行规模(万元)</view>
				</view>
			</view>
			<view v-if="item.sellAmount" class="card-content">
				<view class="cell-view">
					<view class="cell-item">出资总额 : {{item.sellAmount}}万元</view>
					<view class="cell-item">出资笔数 : {{item.sellCount || 0}}</view>
					<view v-if="item.remainingScale > 0" class="cell-item">剩余 : {{item.remainingScale}}%</view>
				</view>
				<view v-if="item.remainingScale > 0" class="progress-view">
					<view class="progress-item" :style="{'--width': `${item.remainingScale || 0}%`}"></view>
				</view>
				<block v-if="false">
					<view class="division"></view>
					<view class="total-money">
						<view class="item-view">
							<view class="item-label">出资总额(万元) :</view>
							<view class="item-value" style="color: #FF442F;">{{item.sellAmount}}</view>
						</view>
						<view class="item-view">
							<view class="item-label">出资笔数 :</view>
							<view class="item-value">{{item.sellCount || 0}}</view>
						</view>
					</view>
					<block v-if="item.issueScaleAmount">
						<view class="division"></view>
						<view class="cell-view">
							<view class="label-view">发行规模 : </view>
							<view class="cell-text">{{item.issueScaleAmount}}</view>
							<view class="unit-text">万元</view>
						</view>
						<view class="cell-view" style="justify-content: space-between;">
							<view class="cell-item">
								<view class="label-view">预约剩余 : </view>
								<view class="cell-text">{{item.remainingAmount}}</view>
								<view class="unit-text">万元</view>
							</view>
							<view class="cell-item">
								<view class="label-view">剩余</view>
								<view class="cell-text">{{item.remainingScale}}%</view>
							</view>
						</view>
						<view class="progress-view">
							<view class="progress-item" :style="{'--width': `${item.remainingScale || 0}%`}"></view>
						</view>
					</block>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CardProjectItem",
		props: {
			item: Object
		},
		data() {
			return {

			};
		},
		methods: {
			onNavDetail() {
				uni.navigateTo({
					url: `/pages/projectDetail/projectDetail?detailId=${this.item.projectId}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.project-view {
		width: 100%;
		position: relative;

		.state-icon {
			width: 132upx;
			height: 132upx;
			position: absolute;
			right: 13upx;
			bottom: -11upx;
			z-index: 3;
		}
	}

	.card-item {
		width: 707rpx;
		margin: 0 auto;
		padding: 22upx 0;
		background: #FFFFFF;
		border-radius: 14rpx;
		position: relative;
		z-index: 2;
		@extend .column;
		align-items: flex-start;
		overflow: hidden;

		.card-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.item-name {
			width: 100%;
			padding: 0 33upx;
			@extend .row-start;
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #2C1101;
			position: relative;
			z-index: 2;
		}

		.tag-view {
			width: 100%;
			@extend .row-start;
			padding: 0 33upx;
			margin-top: 11upx;
			position: relative;
			z-index: 2;

			.tag-item {
				padding: 4upx 9upx;
				background: #69442E;
				border-radius: 7rpx;
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.num-view {
			width: 100%;
			padding: 0 40upx;
			margin-top: 24upx;
			@extend .row-start;
			align-items: flex-end;
			position: relative;
			z-index: 2;

			.division {
				width: 1px;
				height: 25rpx;
				background: #F7E8E4;
				margin: 0 42upx;
				margin-bottom: 5upx
			}

			.num-item {
				@extend .column;
				align-items: flex-start;

				&:first-child {
					.num-text {
						color: #FF442F;
					}
				}

				.num-text {
					font-size: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #2C1101;
					position: relative;

					.symbol-text {
						position: absolute;
						right: -20upx;
						top: 0upx;
						font-size: 24upx;
					}
				}

				.num-desc {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #69442E;
				}
			}
		}


		.card-content {
			width: calc(100% - 36upx);
			margin: 0 auto;
			margin-top: 27upx;
			border-radius: 7rpx;
			padding: 29upx 14upx;
			background: #FFF8F4;
			position: relative;
			z-index: 2;

			.cell-view {
				width: 100%;
				padding-right: 30upx;
				@extend .row-between;

				.cell-item {
					font-weight: 400;
					font-size: 22rpx;
					color: #B38569;
				}
			}

			.progress-view {
				width: 482rpx;
				height: 14rpx;
				background: #F1E6DF;
				border-radius: 7rpx;
				margin-top: 22upx;

				.progress-item {
					width: var(--width);
					height: 14rpx;
					background: #FF442F;
					border-radius: 7rpx;
				}
			}
		}
	}

	.card-active {
		.item-name {
			color: #FFFFFF;
		}

		.num-view {
			.division {
				background: #D9B6A1;
			}

			.num-item {
				&:first-child {
					.num-text {
						color: #FFFFFF;
					}
				}

				.num-text,
				.num-desc {
					color: #D9B6A1;
				}
			}
		}

		.card-content {
			background: #531B15;

			.cell-view {
				.cell-item {
					color: #B38569;
				}
			}
		}
	}
</style>